<template>
	<view class="index">
		<view class="title">
			诉求列表
		</view>
		<view class="head u-border-bottom">
			<text>诉求类型</text>
			<text class="head-date">日期</text>
			<text>操作</text>
		</view>


		<scroll-view  scroll-y="true" class="scroll-Y" >
			<view class="list">
				<view v-for="item in appointmentList" :key="item.appointment_id" class="list-item u-border-bottom">
					<view class="item-car">
						<text>{{item.type}}</text>
					</view>
					<view class="item-date">
						{{item.create_time}}
					</view>
					<view class="item-op">
						<u-button type="primary" v-if="item.status == 10" @click="gotoDetail(item.appointment_id)"
							text="查看" :customStyle="btnStyle"></u-button>
						<u-button type="primary" v-if="item.status == 20" @click="gotoDetail(item.appointment_id)"
							text="处理中" :customStyle="btnStyle"></u-button>	
						<u-button type="primary" v-if="item.status == 30" disabled
							@click="gotoDetail(item.appointment_id)" text="已终止" :customStyle="btnStyle"></u-button>
						<u-button type="primary" v-if="item.status == 40" disabled @click="gotoDetail(item.appointment_id)"
							text="已处理" :customStyle="btnStyle"></u-button>		
					
					</view>
				</view>
			</view>
		</scroll-view>


		<u-empty :show="!hasAppointment" mode="data" icon="/static/imgs/empty-list.png" text="暂无诉求记录" marginTop="100">
		</u-empty>

		<view class="suqiu_btn">
			<u-button type="primary" text="立即诉求" :customStyle="appointmentBtn" @click="toAppointment"></u-button>
		</view>

	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import * as Api from '@/api/appointment.js'
	import FormTypeEnum from '@/common/enum/FormType.js'
	import FormStatusEnum from '@/common/enum/FormStatus.js'
	import AppointmentBtn from '@/components/AppointmentBtn.vue'

	export default {
		components: {
			AppointmentBtn
		},
		data() {
			return {
				btnStyle: {
					width: '140rpx',
					height: '53rpx',
					borderRadius: '5px'
				},

				appointmentBtn: {
					marginTop: '150rpx',
					borderRadius: '7px'
				},

				// 诉求记录
				appointmentList: []
			}
		},
		computed: {
			// 是否有诉求记录
			hasAppointment() {
				return Boolean(this.appointmentList.length)
			}
		},
		onLoad() {
			// 获取用户的诉求记录
			this.getUserAppointmentList()
		
		},
		methods: {
			// 获取用户的诉求记录
			getUserAppointmentList() {
				if(this.$store.getters.token){
					Api.list({
						params: {
							code: ''
						}
					}).then(res => {
						this.appointmentList = res.list
						if(this.appointmentList.length == 0){
							this.toAppointment()
						}
					})
				}else{
					wx.login({
						success: res => {
							Api.list({
								params: {
									code: res.code
								}
							}).then(res => {
								this.getUserAppointmentList()
							})
						}
					})
				}


			},

			// 获取表单类型
			getFormType(value) {
				return FormTypeEnum.getNameByValue(value)
			},

			gotoDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},

			toAppointment() {
				uni.navigateTo({
					url: '/pages/add/add'
				})
			},
			
			onShareAppMessage() {
				return {
				  title: "恩平市那吉镇吉事吉办",
				  path: `/pages/index/index`
				 }
			},
			onShareTimeline(){
				return {
				  title: "恩平市那吉镇吉事吉办",
				  path: `/pages/index/index`
				 }
			}
		}
	}
</script>

<style scoped lang="scss">
	.index {
		box-sizing: border-box;
		width: 750rpx;
		padding: 36.79rpx 24.53rpx;
		color: #333;
		
		.scroll-Y{
			max-height: 820rpx;
		}

		.title {
			font-size: 16px;
			font-family: 'PingFangSC-Medium';
		}

		.head {
			padding-bottom: 21.02rpx;
			margin-top: 61.33rpx;
			font-size: 15px;
			font-family: 'PingFangSC-Regular';
			display: flex;
			border-color: #CECCCA !important;

			text {
				flex: 1;
				text-align: center;

				&:first-child {
					text-align: left;
				}

				&.head-date {
					flex: 1.5;
				}
			}
		}

		.list {
			font-family: 'PingFangSC-Regular';
			font-size: 15px;
			color: #333;

			.list-item {
				border-color: #CECCCA !important;
				padding: 42.05rpx 0;
				display: flex;
				align-items: center;

				&>view {
					flex: 1;
				}

				.item-car {
					display: flex;
					align-items: center;
				}

				.item-date {
					flex: 1.5;
					text-align: center;
				}

				.item-op {}
			}
		}

		.suqiu_btn {
			position: fixed;
			width: 700rpx;
			bottom: 30rpx;
		}

	}
</style>
